<template>
    <div class="com-search-box">
        <div class="search-header">
            <input type="text" :placeholder="placeInner" v-model="serachContent">
            <div class="search-icon" @click="addHistory(serachContent, 0)"></div>
			<span @click="addHistory(serachContent, 0)">搜索</span>
            <span @click="cancel">取消</span>
        </div>
        <div class="search-content" v-if="showContent">
            <circle-box :circleList="searchResult" v-if="type==-1"></circle-box>
            <book-box :bookList="searchResult" v-if="type==4"></book-box>
            <micro-box :circleList="searchResult" v-if="type==5"></micro-box>                        
        </div>
        <div class="history-box" v-else>
            <div class="history-box-title">历史搜索</div>
            <ul>
                <li v-for="(item, index) in historyList" @click="addHistory(item, 1)" :key="index">{{item}}<span @click="deleteHistory(index)"></span></li>
            </ul>
        </div>
    </div>
</template>
<script>
import microBox from '@/pages/market/micro/microBox.vue'
import bookBox from '@/pages/market/listen/bookBox.vue'
import circleBox from '@/pages/market/circle/circleBox.vue'
import market from '@/api/market.js'
export default {
    props: ['placeInner', 'type'],
    components: {
        circleBox,
        microBox,
        bookBox
    },
    data () {
        return {
            serachContent: '',
            historyList: [],
            showContent: false,
            searchResult: []
        }
    },
    methods: {
        deleteHistory (index) {
            this.historyList.splice(index, 1)
        },
        addHistory (item, index) {
            if (index == 0) {
                this.historyList.push(this.serachContent)
            }
            this.showContent = true
            if (this.type == -1) {
                market.searchCircle(item).then(res => {
                    this.searchResult = res.t
                })
            } else if (this.type == 4 || this.type == 5) {
                console.log(1)
                market.searchInfo(item, this.type).then(res => {
                    this.searchResult = res.t
                })
            }
        },
        cancel () {
            this.serachContent = ''
            this.showContent = false
        }
    }
}
</script>

<style lang="less" scoped>
    .com-search-box {
        .search-header {
            padding: 0 0.3rem;
            font-size: 0;
            height: 0.9rem;
            line-height: 0.9rem;
            border-bottom: 1px solid #ccc;
            display: flex;
            position: relative;
            input {
                flex: 1;
                height: 0.6rem;
                line-height: 0.6rem;
                background: #efefef;
                outline: none;
                border: none;
                margin-top: 0.15rem;
                border-radius: 3px;
                position: relative;
                padding-left: 0.42rem;
                text-align: left;
                font-size: 0.3rem;
            }
            input::-webkit-input-placeholder{ /*WebKit browsers*/
				
				color: #5e5e5e;
				
				}
				
			input::-moz-input-placeholder{ /*Mozilla Firefox*/
				
				color: #5e5e5e;
				
				}
				
			input::-ms-input-placeholder{ /*Internet Explorer*/ 
				
				color: #5e5e5e;
				
			}
            .search-icon {
                position: absolute;
                left: 0.35rem;
                top: 50%;
                width: 0.33rem;
                height: 0.37rem;
                background: #f00;
                margin-top: -0.18rem;
                background: url(../../assets/img/search-box-icon.png) no-repeat;
                background-size: 100%;
            }
            span {
                display: inline-block;
                text-align: right;
                font-size: 0.28rem;
                color: #282828;
                margin-left: 0.2rem;
            }
        }
        .history-box {
            padding-left: 0.3rem;
            .history-box-title {
                height: 0.8rem;
                line-height: 0.8rem;
                color: #707070;
                font-size: 0.3rem;
                border-bottom: 1px solid #ccc;
            }
            ul {
                color: #0a0a0a;
                font-size: 0.28rem;
                li {
                    height: 0.8rem;
                    line-height: 0.8rem;
                    color: #0a0a0a;
                    font-size: 0.28rem;
                    border-bottom: 1px solid #ccc;
                    position: relative;
                    span {
                        position: absolute;
                        right: 0.3rem;
                        width: 0.2rem;
                        height: 0.2rem;
                        top: 50%;
                        margin-top: -0.1rem;
                        background: url(../../assets/img/delete-search-icon.png) no-repeat;
                        background-size: 100%;
                    }                        
                }  
            }
        }
    }
</style>

